{% extends "layout.html" %}
{% block content %}
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form" lay-filter="form">
        <table class="layui-table">
            <tbody>
            <tr>
                <th><span class="x-red">*</span>数据标题</th>
                <td colspan="3">
                    <input type="text" id="title" name="title" required="required" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </td>
                <!--<th><span class="x-red">*</span>采集通道名称</th>
                <td colspan="1">
                    <select id="channel_name" name="channel_name" lay-filter="channel_name">
                    </select>
                </td>-->
            </tr>
            <tr>
                <th><span class="x-red">*</span>采集通道ID和名称</th>
                <td colspan="3">
                    <select id="channel_id" name="channel_id" lay-filter="channel_id" required="required">
                    </select>
                </td>
            </tr>
            <th><span class="x-red">*</span>数据点</th>
            <td colspan="3">
                <select id="dataItem" name="dataItem" lay-filter="dataItem" lay-search="" required="required">
                </select>
            </td>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <button id="confirmBtn" class="layui-btn" lay-filter="save" lay-submit="">
                        增加
                    </button>
                </td>
                <td colspan="2" style="text-align: center;">
                    <button type="reset" class="layui-btn">
                        重置
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<script>
    var data_bind_id = GetQueryString('data_bind_id');
    var dataItem_id = "";
    // var data_type;
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;
        $.ajax({
            url: "getChannelInfo",
            type: "POST",
            dataType: "json",
            success: function (data) {
                $("#channel_id").empty();
                $.each(data.data, function (kay, val) {
                    $("#channel_id").append(new Option("ID:"+val.channel_id+" 名称:"+val.name));
                });
                form.render('select');
                $("#channel_id").val("ID:"+data.data[0].channel_id+" 名称:"+data.data[0].name);
                set_dataItem_list();
            }
        });

        function set_dataItem_list() {
            let channel_id = $("#channel_id").val();
            channel_id = channel_id.split(" ")[0].split(":")[1];
            $.ajax({
                url: "dataItem_list",
                type: "POST",
                dataType: "json",
                data: {
                    channel_id: channel_id,
                },
                success: function (dataItems) {
                    $("#dataItem").empty();
                    $("#dataItem").append(new Option("直接选择或搜索选择", "-1"));
                    $.each(dataItems.data, function (key, val) {
                        $("#dataItem").append(new Option("标签[" + val.label + "];地址:" + val.address + ";值" + val.value, val.dataItem_id));
                    });
                    layui.form.render();
                    if (data_bind_id != null) {
                        data = {'data_bind_id': data_bind_id};
                        $('#confirmBtn').html('保存');
                        $.ajax({
                            url: "read_data_bind",
                            type: "POST",
                            data: {
                                data_bind_id: data_bind_id
                            },
                            dataType: "json",
                            success: function (data) {
                                form.val("form", {
                                    title: data.data[0].title,
                                    port: data.data[0].port,
                                });
                                form.val("form", {
                                    dataItem: data.data[0].dataItem_id,
                                });
                            }
                        });
                    }
                }
            });
        }

        //监听通道变化
        form.on('select(channel_id)', function (data) {
            set_dataItem_list();
        });
        //监听通道名称变化
        /* form.on('select(channel_name)', function (data) {
             set_dataItem_list();
         });*/
        //监听提交
        form.on('submit(save)', function (data) {
            if (data_bind_id != null)
                data.field['data_bind_id'] = data_bind_id;
            $.ajax({
                url: 'save_data_bind', type: 'POST', dataType: 'json', data: data.field, success: function (data) {
                    if (data.code === 0) {
                        // layer.msg('操作成功!');
                        layer.alert("操作成功", {icon: 6}, function () {
                            parent.location.reload();
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
{% endblock %}